<template>
	<view class="container">
		<view class="content">
			<!-- 顶部logo部分 -->
			<view class="logo">
				<swiper class="swiper"
				:indicator-dots="true" 
				:autoplay="true" 
				:interval="3000" 
				:duration="500">
					<swiper-item  v-for="item in lunboList" :key="item.id">
					<view class="item"> 
						<image :src="item.imageUrl"></image> 
					</view>
					</swiper-item>
				</swiper>
			</view>
			<!-- 小logo -->
			<view class="mini">
				<view class="left"></view>
				<span>蓝天飞梦青少年模拟飞行</span>
			</view>
			<!-- 固定公告栏 -->
			<view class="sign">
				<view class="s1 b-s" v-for="(item,index) in noticeInfo" :key="item.id" @click="gonggao(index)">
					<image :src="item.imageUrl" mode="aspectFill"></image>
					<!-- <text class="t-top tm">公告:</text>
					<text class="t-top nr">{{item.title}},{{item.content==null?'':item.content}}</text> -->
				</view>
			</view>
		</view>
	</view>
	
</template>

<script>
	import {competitions,lunbo,notice} from "../../apis"
	export default {
		data() {
			return {
				// matchList:[],
				lunboList:[],
				noticeInfo:[]
			}
		},
		onLoad() {

		},
		onShow() {
			uni.showLoading({
			    title: '加载中'
			});
			// competitions().then((res)=>{
				// let [err,data]=res
				// console.log('进入首页获取比赛列表：')
				// console.log(data.data.data)
				// this.matchList = data.data.data
				// console.log(this.matchList)
			// }),
			lunbo().then((res)=>{
				let [err,data]=res
				if(err!=null){
					console.log(err)
				}
				// console.log('进入首页获取轮播图列表：')
				// console.log(data)
				// console.log(data.data)
				this.lunboList = data.data.data
				// console.log(this.matchList)
					
			})
			notice({
				"type":"1"
			}).then((res)=>{
				let [err,data]=res
				if(err!=null){
					console.log(err)
				}
				console.log(data)
				this.noticeInfo = data.data.data
				console.log("大赛通知："+this.noticeInfo)
				uni.hideLoading();
			})
		},
		onPullDownRefresh(){
			uni.showLoading({
			    title: '加载中'
			});
			// competitions().then((res)=>{
				// let [err,data]=res
				// console.log('进入首页获取比赛列表：')
				// console.log(data.data.data)
				// this.matchList = data.data.data
				// console.log(this.matchList)
			// }),
			lunbo().then((res)=>{
				let [err,data]=res
				if(err!=null){
					console.log(err)
				}
				// console.log('进入首页获取轮播图列表：')
				// console.log(data)
				// console.log(data.data)
				this.lunboList = data.data.data
				// console.log(this.matchList)
					
			})
			notice({
				"type":"1"
			}).then((res)=>{
				let [err,data]=res
				if(err!=null){
					console.log(err)
				}
				console.log(data)
				this.noticeInfo = data.data.data
				console.log("大赛通知："+this.noticeInfo)
				uni.hideLoading();
			})
			setTimeout(function () {
			            uni.stopPullDownRefresh();
			        }, 1000);
			},
		methods: {
			gonggao(index){
				uni.navigateTo({
					url:'../gonggao/gonggao?index='+index+'&number='+1
				})
			},
			onShareAppMessage: function(e) {
							let title = '蓝天飞梦小程序'
							return {
								title: title,
								path: 'pages/index/index'
							}
						}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		position: relative;
		.logo{
			width: 100%;
			height: 300px;
			margin: 5px auto;
			swiper{
				padding-bottom: 5px;
				width: 100%;
				height: 100%;
				swiper-item{
					.item{
						width: 100%;
						height: 100%;
					}
				}
			}
			
		}
		.mini{
			width: 100%;
			height: 50px;
			position: relative;
			background-color: #fff;
			margin-bottom: 10px;
			margin-top: 10px;
			.left{
				width: 100%;
				height: 100%;
				background-image: url(../../static/icon.png);
				background-repeat: no-repeat;
				background-size: 50%;
				position: absolute;
				top: 0;
				left:10px;
			}
			span{
				font-size: 16px;
				font-weight: 900;
				color: #CCC;
				position: absolute;
				right: 10px;
				bottom: 7px;
			}
		}
		.sign{
			.s1{
				width: 100%;
				height: 70px;
				margin-bottom: 15px;
				position: relative;
				.tm{
					position: absolute;
					left: 8px;
					top: 15px;
					font-weight: 900;
				}
				.nr{
					position: absolute;
					left: 25px;
					font-weight: 900;
					top: 56px;
					width: 65%;
					overflow: hidden;
					height: 65%;
					white-space: nowrap;
					text-overflow: ellipsis;

				}
			}
		}
		
	}
	
</style>
